<template>
  <div class="body">
    <div class="select">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div id="middleEcharts" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { color } from "echarts/lib/export";
export default {
  props: ["stateList"],
  data() {
    return {
      options: [
        {
          value: "1",
          label: "2024",
        },
        {
          value: "2",
          label: "2023",
        },
       
      ],
      value: "1",
    };
  },
  methods: {
    everyDay() {
      var chartDom = document.getElementById("middleEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "工程部",
            "信息部",
            "市场部",
            "驻地网",
            "集客中心",
            "家客中心",
          ],
        },
        series: [
          {
            name: "收入",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 2, 201, 154, 190, 330],
            color: "#2478F2",
          },
          {
            name: "支出",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330],
            color: "#84B7F9",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.everyDay();
  },
};
</script>
<style lang="scss" scoped>
/* @media (min-width: 1925px) {
  .echarts {
    width: 100%;
    height: 90%;
  }
}
@media (min-width: 1280px) and (max-width: 1925px) {
  .echarts {
    width: 100%;
    height: 85%;
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .echarts {
    width: 100%;
    height: 75%;
  }
} */
.body {
  display: flex;
}
.echarts {
  width: 96%;
  height: 90%;
}
.select {
  width: 100px;
  height: 100px;
}
</style>
